﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    @*<link href="~/Content/css/Teacher_Manager.css" rel="stylesheet" />*@
    <style>
        .content{
            width:1210px;
            margin:0 auto;
        }
        .flex {
            display: flex;
        }

        .a-c {
            align-items: center;
        }

        .j-s {
            justify-content: center;
        }

        .toolbar {
            padding: 10px 15px;
            width: 700px;
            border-radius:20px
        }

        .toolbar div {
            height: 38px;
            
        }
    </style>
</head>
<body>
    <div class="content">
        <table id="mytable" lay-filter="mytable"></table>
    </div>

    <script type="text/html" id="mytoolbar">
        <div class="flex toolbar a-c">
            <button class="layui-btn layui-btn-sm" style="display: block; margin-right: 50px;" lay-event="add">添加</button>

            姓名:&nbsp;
            <input type="text" name="title" id="search" placeholder="请输入姓名查询" autocomplete="off" class="layui-input" style="height: 30px; width: 200px;">
            <button class="layui-btn layui-btn-sm" style="margin-left: 30px;" onclick="search()">搜索</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="resetSearch()" style="margin-left: 30px;">重置</button>
        </div>
    </script>

    <script type="text/html" id="mybar">
        @*    <div class="table" style="padding:0 20px"></div> *@
        {{#  if(d.state){ }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="freeze" style="border-radius: 6px;height:26px;width:56px; line-height:26px;">
            启用
        </a>
        {{#  } else{ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="freeze" style="border-radius: 6px;height:26px;width:56px; line-height:26px;">冻结</a>
        {{# } }}
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="flush" style="border-radius: 6px;height: 26px;width: 56px;line-height: 26px">重置密码</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit" style="border-radius: 6px;height: 26px;width: 56px;line-height: 26px">编辑</a>
    </script>
    @* 添加弹出层开始 *@
    <div style="display: none; padding: 20px;" id="saveOrUpdateDiv">
        <form class="layui-form" lay-filter="dataFrm" id="dataFrm" style="width:660px;margin-top: 20px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="teacherName" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" >
                    <label class="layui-form-label">出生日期：</label>
                    <!-- 注意：这一层元素并不是必须的 -->
                    <input type="text" class="layui-input" id="test1" name="age" style="width:190px;">
                </div>
    
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">工号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="workNumber" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">电话：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">职称：</label>
                        <div class="layui-input-block" style="width:190px">
                            <select id="mySelect" name="role" lay-filter="role" autocomplete="off">
                                <option id="defalut" value="">请选择教师级别</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline"style="width:310px; margin-left:10px">
                        <div class="layui-input-inline" style="width:310px" >
                            <label class="layui-form-label">性别：</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="sex" value="1" title="男">
                                <input type="radio" name="sex" value="0" title="女">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">介绍：</label>
                <div class="layui-input-block" style="width:512px">
                    <textarea placeholder="请输入内容" name="info" autocomplete="off" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item" style="margin-left:152px; margin-top:30px">
                <div class="layui-input-block">
                    <button type="button"
                            class="layui-btn layui-btn-normal  layui-icon layui-icon-upload-circle"
                            lay-filter="doSubmit" lay-submit="">
                        提交
                    </button>
                    <button type="reset"
                            class="layui-btn  layui-btn-warm layui-btn-primary layui-icon layui-icon-refresh">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
    @* 添加弹出层结束 *@

    @* 添加修改层开始 *@
    <div style="display: none; padding: 20px;" id="redactSaveOrUpdateDiv">
        <form class="layui-form" lay-filter="dataFrm1" id="dataFrm1" style="width:660px;margin-top: 20px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="teacherName" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">电话：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phone" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
        
            </div>

            <div class="layui-form-item" style="display:none">
                <div class="layui-inline">
                    <label class="layui-form-label">工号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="workNumber" autocomplete="off" disabled="disabled" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">职称：</label>
                        <div class="layui-input-block" style="width:190px">
                            <select id="mySelect1" name="role" lay-filter="role" autocomplete="off">
                                <option id="defalut" value="">请选择教师级别</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width:310px">
                            <label class="layui-form-label">性别：</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="sex" value="1" checked="checked" title="男">
                                <input type="radio" name="sex" value="0" title="女">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item" style="display:flex">
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">介绍：</label>
                <div class="layui-input-block" style="width:500px">
                    <textarea placeholder="请输入内容" name="info" autocomplete="off" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item" style=" margin-top:30px;margin-left:125px;">
                <div class="layui-input-block">
                    <button type="button"
                            class="layui-btn layui-btn-normal  layui-icon layui-icon-upload-circle"
                            lay-filter="doSubmit1" lay-submit="">
                        提交
                    </button>
                    <button type="reset"
                            class="layui-btn  layui-btn-warm layui-btn-primary layui-icon layui-icon-refresh">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
    @* 添加修改层结束 *@
    <script src="~/Content/layui/layui.js"></script>
    <script>
        var mydata;
        var search;
        var searchString = "";
        var resetSearch;
        layui.use(['table', 'jquery', 'form', 'transfer', 'laytpl', 'layer', 'laydate'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            var transfer = layui.transfer;
            var laytpl = layui.laytpl;
            var layer = layui.layer;
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
            });

            $('#search').val(searchString);

            search = function () {
                searchString = $('#search').val();
                tableIns.reload({
                    where: { search: searchString }
                });
                $('#search').val(searchString);
            }

            resetSearch = function () {
                searchString = "";
                tableIns.reload({
                    where: { search: "" }
                });
                $('#search').val(searchString);
            }

            var tableData = {
                elem: '#mytable', url: '/api/getallteacher' //数据接口
                , where: { search: "" }, page: true //开启分页
                , height: 650, limit: 12, toolbar: '#mytoolbar', defaultToolbar: ['print', 'exports'], cols: [[//表头
                    //{ type: 'checkbox', fixed: 'left', /* LAY_CHECKED: true */ }
                    { type: 'numbers' } //添加序号
                    , { field: 'id', title: 'ID', width: 60, hide: true, align: 'center' },
                    { field: 'workNumber', width: 80, title: '工号', align: 'center' },
                    { field: 'teacherName', title: '姓名', width: 80, align: 'center' },
                    { field: 'sex', title: '性别', width: 60, align: 'center' },
                    { field: 'age', title: '年龄', width: 80, align: 'center' },
                    { field: 'phone', title: '电话', width: 116, align: 'center' },
                    { field: 'info', title: '简介', width: 276, align: 'center' },
                    { field: 'role', title: '职称', width: 114, align: 'center' },
                    { field: 'state', title: '状态', width: 80, align: 'center',
                        templet: function(d) {
                            let state = "禁用";
                            if (d.state == false) {
                                state = "正常";
                                return '<span style="background-color:#0984e3;color:#ffffff;display:inline-block;width: 48px;height: 24px;line-height: 24px;border-radius:4px">' +
                                    state +
                                    '<span>';
                            }
                            if (d.state == true) {
                                return '<span style="background-color:#FF5722;color:#ffffff;display:inline-block;width: 48px;height: 24px;line-height: 24px;border-radius:4px">' +
                                    state +
                                    '<span>';
                            }
                        }
                    },
                     { toolbar: '#mybar', title: '操作', width: 276, align: 'center' }
                ]]
            }

            var tableIns = table.render(tableData);

            //监听工具栏事件
            table.on('toolbar(mytable)',
                function(obj) {
                    switch (obj.event) {
                    case 'add':
                        layer.msg('添加');
                        openAddUser();
                        break;
                    }
                });
            var url;
            var mainIndex;
            //打开添加页面
            function openAddUser() {
                mainIndex = layer.open({
                    type: '1',
                    title: '添加用户',
                    content: $("#saveOrUpdateDiv"),
                    area: ['680px', '464px'],
                    success: function (index) {
                        //  清空表达数据
                        $("#dataFrm")[0].reset();
                        $.get("/api/getrole", function (obj) {
                            console.log(obj);
                            $("#mySelect").empty();
                            obj.map(r => {
                                $("#mySelect").append(`<option value="${r.ID}">${r.Name}</option>`)
                            })
                            //重新渲染
                            form.render();
                        })
                        url = "user/addUser.action";
                    }
                });
                //添加提交
                form.on("submit(doSubmit)",
                    function (obj) {
                        //获取表单值
                        var data1 = form.val("dataFrm");
                        console.log(data1);

                        $.post("/api/insertteacher",
                            {
                                sex: data1.sex,
                                teacherName: data1.teacherName,
                                age: data1.age,
                                workNumber: data1.workNumber,
                                phone: data1.phone,
                                role: data1.role,
                                info: data1.info
                            },
                            function (obj) {
                                layer.msg("添加成功！");
                                //关闭弹出层
                                layer.close(mainIndex);
                                //刷新数据表格
                                table.render(tableData);
                                //layer.reload(tableIns)
                            });
                    });
            }

            //打开修改页面
            function openUpdateUser(data) {
                mainIndex = layer.open({
                    type: '1',
                    title: '修改用户',
                    content: $("#redactSaveOrUpdateDiv"),
                    area: ['680px', '440px'],
                    success: function (index) {
                        if (data.sex == "男") {
                            data.sex = 1;
                        } else {
                            data.sex = 0;
                        }
                        form.val("dataFrm1", data)
                        $.ajax({
                            url: "/api/getrole",
                            cache: false,
                            success: function (obj) {
                                $("#mySelect1").empty();
                                obj.map(r => {
                                    $("#mySelect1").append(`<option value="${r.ID}">${r.Name}</option>`)
                                })
                                //重新渲染
                                form.render();
                            }
                        });
                        //$.get("/api/getrole", function (obj) {
                        //    console.log(obj);
                        //    obj.map(r => {
                        //        $("#mySelect").append(`<option value="${r.ID}">${r.Name}</option>`)
                        //    })
                        //    //重新渲染
                        //    form.render();
                        //})
                        url = "user/addUser.action";
                        //$.post("/api/update", data);
                    }
                });

                //修改提交
                form.on("submit(doSubmit1)",
                    function (obj) {
                        //获取表单值
                        var data1 = form.val("dataFrm1");
                       
                        $.post("/api/updatateacher",
                            {
                                id: data.id,
                                sex: data1.sex,
                                teacherName: data1.teacherName,
                                age: data.age,
                                workNumber: data1.workNumber,
                                phone: data1.phone,
                                role: data1.role,
                                info: data1.info
                            },
                            function (obj) {
                                layer.msg("修改成功！")
                                //关闭弹出层
                                layer.close(mainIndex);
                                //刷新数据表格
                                table.render(tableData);
                                //layer.reload(tableIns)
                            });
                    });
            }
          

            table.on('tool(mytable)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                var layEvent = obj.event;
                if (layEvent === 'freeze') {
                    layer.confirm(`是否${data.state == false ? '禁用' : '启用'}此账户`, { icon: 3, title: '提示' }, function (index) {
                        //do something
                        $.get('/api/freeze', { id: data.id }, function (res) {
                            
                            tableIns.reload(tableData);
                        })
                        layer.close(index);
                    });
                }
                else if (layEvent === 'flush') {
                    layer.msg("重置密码成功！");
                    layer.confirm('用户密码将会恢复成123456，确定恢复吗？', function (index) {
                        console.log(data.id);
                        $.get('/api/resetpwd', { id: data.id }, function () {
                            tableIns.reload(tableData);
                        })
                        layer.close(index);
                    });
                }
                else if (layEvent === 'edit') {
                    openUpdateUser(data);
                }
            });
        });

    </script>
</body>
</html>
